<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/CustomMVC/">
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="js/jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #cccccc;
        }
        .div1 {
            position: fixed;
            background-color: #236706;
            height: 100px;
            width: 100%;
            min-width: 1000px;
            top: 0;
            z-index: 10;
        }
        .div1 h2 {
            height: 100%;
            float: left;
            margin:32px 50px;
            font-size: 36px;
            color: #02eccc;
        }
        .div1 a {
            float: left;
            color: white;
            font-size: 20px;
            /*去除超链接的下划线*/
            text-decoration: none;
            padding: 2px 10px;
        }
        .div1 .but {
            float: right;
            border: 2px solid rgb(255, 238, 0);
            /*使元素的角变圆*/
            border-radius: 25px;
            padding: 6px 25px;
            margin: 30px 10px;
        }
        .div1 .but > a {
            color: rgb(255, 238, 0);
        }
        .div1 .but1 {
            margin-right: 60px;
        }
        .div1 .but:hover {
            background-color: rgb(255, 238, 0);
        }
        .div1 .but:hover a {
            color: rgb(180, 81, 81);
        }
        .div1 .but:hover .loginBox {
            display: block;
        }
        .loginBox {
            background-image: url(img/背景03.jpg);
            background-repeat: round;
            width: 400px;
            height: 250px;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-top: 60px;
            display: none;
            z-index: 100;
        }

        .regBox {
            background-image: url(img/背景02.jpg);
            background-repeat: round;
            width: 400px;
            height: 300px;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding-top: 60px;
            display: none;
            z-index: 100;
        }
        .loginBox div {
            text-align: center;
            margin-top: 20px;
        }
        .loginBox input {
            font-size: 20px;
            border: 1px solid #000000;
            border-radius: 3px;
            padding: 4px 10px;
        }
        .loginBox button {
            font-size: 20px;
            border: 0;
            border-radius: 20px;
            background-color: #13CE66;
            color: white;
            line-height: 35px;
            width: 100px;
            height: 40px;
        }
        .regBox div {
            text-align: center;
            margin-top: 20px;
        }
        .regBox input {
            font-size: 20px;
            border: 1px solid #000000;
            border-radius: 3px;
            padding: 4px 10px;
        }
        .regBox button {
            font-size: 20px;
            border: 0;
            border-radius: 20px;
            background-color: #13CE66;
            color: white;
            line-height: 35px;
            width: 100px;
            height: 40px;
        }
        .main{
            height: 800px;
            width: 80%;
            margin: 100px auto 0;
            padding: 0;
            background-color: white;
            position: relative;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="div1">
        <h2>这是mokai的首页</h2>
        <div class="but but1" th:if="${session.currentUser==null}">
            <a href="javascript:void(0)" onclick="openRegBox()">注册</a>
        </div>
        <div class="but" th:if="${session.currentUser==null}">
            <a href="javascript:void(0)" onclick="openLoginBox()">登录</a>
        </div>

        <div class="but but1" th:if="${session.currentUser != null}">
            <a href="userExit">退出</a>
        </div>
        <div class="but" th:if="${session.currentUser != null}">
            <a href="userUpdatePage" th:text="${session.currentUser.account}">用户账号</a>
        </div>
    </div>

    <div class="loginBox">
        <form id="form1" action="userLogin" method="get" onsubmit="return loginCheck()">
            <div><input type="text" id="account" name="account" placeholder="输入账号"/></div>
            <div><input type="text" id="pwd" name="password" placeholder="输入密码"/></div>
            <div>
                <button>登录</button>
            </div>
        </form>
    </div>

    <div class="regBox">
        <form action="userReg" method="get" onsubmit="return regCheck()">
            <div><input type="text" id="account1" name="account" placeholder="输入账号" onblur="accountCheck()"/></div>
            <div><input type="text" id="pwd1" name="password" placeholder="输入密码"/></div>
            <div><input type="text" id="pwd2" name="password" placeholder="重复密码"/></div>
            <div>
                <button>注册</button>
            </div>
        </form>
    </div>
    <div class="main">
        <input type="text" id="account2" placeholder="账号">
        <input type="text" id="sex" placeholder="性别">
<!--        <input type="button" value="查询" onclick="queryUser()">-->
        <input type="button" value="查询" id="queryBut">
        <table id="tb" border="1px" width="50%" style="text-align: center;margin: 10px auto;">
            <tr><th>ID</th><th>账号</th><th>姓名</th></tr>
            <tr th:each="user:${userList}">
                <td th:text="${user.id}">ID</td>
                <td th:text="${user.account}">账号</td>
                <td th:text="${user.ud.name}">姓名</td>
            </tr>
        </table>
    </div>

    <script th:inline="javascript">
        //页面加载完成后自动执行
        $(function (){

            $("#queryBut").click(function (){
                {
                    let account = $("#account2").val();
                    let sex = $("#sex").val();
                    // $.ajax({
                    //     url: "queryUser",
                    //     type: "POST",
                    //     data: {
                    //         account: account,
                    //         sex: sex
                    //     },
                    //     success: function (result) {
                    //         if (result != "") {
                    //             let list = JSON.parse(result);
                    //             let str = "<tr><th>ID</th><th>账号</th><th>姓名</th><th>性别</th></tr>";
                    //             for (let user of list) {
                    //                 if (user == null) continue;
                    //                 str += "<tr><td>" + user.id + "</td><td>" + user.account + "</td><td>" + (user.ud != null ? user.ud.name : "") + "</td><td>" + (user.ud != null ? user.ud.sex : "") + "</td></tr>";
                    //             }
                    //             $("#tb").html(str);
                    //         } else {
                    //             alert("查询失败!")
                    //         }
                    //     },
                    //     error: function (result) {
                    //         alert("服务器请求失败")
                    //     }
                    // });
                    $.get("queryUser",
                        {account: account,
                        sex: sex},
                        function (result){
                        refreshPage2(result)
                    })
                }
            });
            autoArrange(200);
            showMsg();
        })
        //绑定窗口改变大小事件
        $(window).resize(function (){
            autoArrange2();
        })
        //打开登录窗口
        function openLoginBox() {
            if ($(".loginBox").css("display") == "none") {
                let account = getCookie("account");
                if (account != null && account != "") {
                    $("#account").val("cookie");
                    $("#pwd").val("cookie");
                    $("#form1").submit();
                } else {
                    $(".loginBox").show();
                    $(".regBox").hide();
                }
            } else {
                $(".loginBox").hide();
            }
        }
        //打开注册窗口
        function openRegBox() {
            if ($(".regBox").css("display") == "none") {
                $(".regBox").show();
                $(".loginBox").hide();
            } else {
                $(".regBox").hide();
            }
        }

        //登录校验
        function loginCheck() {
            let account = $("#account").val();
            if (account == null || account == "") {
                alert("账号不能为空！");
                return false;
            }
            return true;
        }

        //注册校验
        function regCheck() {
            let account = $("#account1").val();
            let pwd1 = $("#pwd1").val();
            let pwd2 = $("#pwd2").val();
            if (account == null || account == "") {
                alert("账号不能为空！");
                return false;
            }
            if (pwd1 == null || pwd1 == "") {
                alert("密码不能为空！");
                return false;
            }
            if (pwd1!=pwd2) {
                alert("密码不一致！");
                return false;
            }
            return true;
        }

        //ajaxGET方法
        function accountCheck(){
            let account = $("#account1").val();
            let xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("GET","accountCheck?account="+account,true);
            xmlHttpRequest.onreadystatechange = function (){
                if (xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    refreshPage(xmlHttpRequest.responseText);
                }
            }
            xmlHttpRequest.send();
        }
        //页面刷新（ajax回调方法）
        function refreshPage(result){
            if (result=="true"){
                alert("账号可用");
            }else{
                alert("账号已存在!")
            }
        }

        //ajax查询方法
        function queryUser(){
            let account = $("#account2").val();
            let sex = $("#sex").val();
            let xmlHttpRequest = new XMLHttpRequest();
            xmlHttpRequest.open("POST","queryUser",true);
            xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlHttpRequest.onreadystatechange = function (){
                if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
                    //调用刷新页面方法
                    refreshPage2(xmlHttpRequest.responseText);
                }
            }
            xmlHttpRequest.send("account="+account+"&sex="+sex);
        }

        //页面刷新（ajax回调方法）
        function refreshPage2(result){
            if (result!=""){
                let list = JSON.parse(result);
                let str = "<tr><th>ID</th><th>账号</th><th>姓名</th><th>性别</th></tr>";
                for (let user of list){
                    if (user == null) continue;
                    str += "<tr><td>"+user.id+"</td><td>"+user.account+"</td><td>"+(user.ud!=null?user.ud.name:"")+"</td><td>"+(user.ud!=null?user.ud.sex:"")+"</td></tr>";
                }
                $("#tb").html(str);
            }else {
                alert("查询失败!")
            }
        }

        //窗口大小变化时重拍图片
        function autoArrange2(){
            let itemList = $(".item");
            let mainWidth = $(".main").css("width").toString().replace("px","");
            let itemWidth = itemList.css("width").toString().replace("px","");

            let colNum = Math.floor(mainWidth/itemWidth);
            colNum = colNum<itemList.length?colNum:itemList.length;
            let yushu = mainWidth-colNum*itemWidth;
            let result = yushu / (colNum*1 + 1);

            itemList.each(function (index,item){
                let dy = Math.floor(index/colNum)*(itemWidth*1+10)+10;
                let dx = (index%colNum)*(itemWidth*1+result*1)+result*1;
                $(item).css("top",dy+"px").css("left",dx+"px");
            })
        }
        //排列图片
        function autoArrange(itemWidth){
            let imgUrlList = "[(${imgUrlList})]".replace("[","").replace("]","").split(",");

            let mainWidth = $(".main").css("width").toString().replace("px","");
            let colNum = Math.floor(mainWidth/itemWidth);
            colNum = colNum<imgUrlList.length?colNum:imgUrlList.length;
            let yushu = mainWidth-colNum*itemWidth;
            let result = yushu / (colNum + 1);
            let x = result;
            let y = 10;

            for(let imgUrl of imgUrlList){
                let str= "<div class=\"item\"><img src=\""+imgUrl+"\"></div>";
                let imgItem = $(str).css("width",itemWidth+"px");
                if(x+itemWidth > mainWidth){
                    y += itemWidth+10;
                    x = result;
                }
                imgItem.css("top",y+"px").css("left",x+"px");
                $(".main").append(imgItem);
                x += itemWidth+result;
            }
        }

        //显示后台返回的消息
        function showMsg(){
            let msg = "[(${msg})]";
            if(msg!=null&&msg!=""){
                alert(msg);
            }
        }


        //JS获取指定的cookie
        function getCookie(cookie_name) {
            var allcookies = document.cookie;
            //索引长度，开始索引的位置
            var cookie_pos = allcookies.indexOf(cookie_name);
            // 如果找到了索引，就代表cookie存在,否则不存在
            if (cookie_pos != -1) {
                // 把cookie_pos放在值的开始，只要给值加1即可
                //计算取cookie值得开始索引，加的1为“=”
                cookie_pos = cookie_pos + cookie_name.length + 1;
                //计算取cookie值得结束索引
                var cookie_end = allcookies.indexOf(";", cookie_pos);

                if (cookie_end == -1) {
                    cookie_end = allcookies.length;
                }
                //得到想要的cookie的值
                var value = unescape(allcookies.substring(cookie_pos, cookie_end));
            }
            return value;
        }
    </script>
</body>
</html>